<template>
  <!-- <div @click="$emit('setCount')">Child {{ count }}</div> -->
  <div @click="handleClick">Child {{ count }}</div>
</template>

<script lang="ts">
export default {
  name: "Child",
  // 声明接受后，模板页面可以直接使用
  props: {
    count: {
      type: Number,
      required: true,
    },
    person: {
      type: Object,
      required: true,
    },
  },
  // 声明接受自定义事件
  emits: ["setCount"],
  setup(props, context) {
    /*
      setup 接受两个参数
        props 就是props数据
        context 是一个对象
          emit 触发自定义事件函数
          attrs 未声明接受的属性和事件回调函数
    */
    console.log(props);
    const handleClick = () => {
      // 触发自定义事件
      context.emit("setCount");
    };

    return {
      handleClick,
    };
  },
};
</script>

<style></style>
